<!--  -->
<template>
  <div class='headers'>
    <div class="fatherlayout">
      父组件
      <el-row>
        <el-button size='mini' type="primary" @click="byvalue">点击</el-button>
      </el-row>
      <div>{{values}}</div>
      <child-component>
        <template slot="girl">
            漂亮、美丽、购物、逛街
        </template>
        <template slot="boy">
            帅气、才实
        </template>
        <div>
            我是一类人，
            我是默认的插槽
        </div>
    </child-component>
    </div>
    <div class="sonclass">
      以下子组件中的内容--------------------
      <!-- show子组件自定义方法 yyif父组件接收数据 -->
      <son :names="name" :dynamic="dynamic" @show="yyif"></son>

    </div>
    <navs></navs>
  </div>
</template>

<script>
  import Navs from '../navs.vue';
  import son from './son.vue';
  export default {
    components: {
      son,
      Navs,
      'child-component':{
template:`
            <div>
            <h4>这个世界不仅有男人和女人</h4>

            <slot name="girl"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot name="boy"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot></slot>
            </div>
        `
      }
    },
    
    name: '',
    data() {
      //这里存放数据
      return {
        // name: "父组件中的内容/值",
        name: [1,2,3,5],
        // 动态传值
        dynamic: '',
        // 来自己子组件的值
        values: ""
      };
    },
    //方法集合
    methods: {
      byvalue() {
        this.dynamic = '点击父组件传来的值'
      },
      // 自定义方法
      yyif(sondata) {
        console.log(sondata)
        this.values = sondata
      }
    },
  }

</script>
<style lang='less' scoped>
    .fatherlayout,
    .sonclass {
      width: 100%;
      height: 200px;
      background: skyblue;
      text-align: center;
      margin-bottom: 5px;
    }


</style>
